<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>电动计时仪</title>
    <link rel="stylesheet" type="text/css" href="/public/speed/css/common.css" />
    <link rel="stylesheet" type="text/css" href="/public/speed/css/index.css" />
    <link rel="stylesheet" type="text/css" href="/public/speed/css/style.css" />
  </head>
  <body>
    <div class="page flex-col">
      <div class="box1 flex-col">
        <div class="bd1 flex-col">
          <div class="mod1 flex-col"></div>
          <div class="mod2 flex-row">
            <div class="timing">
              <div style="margin-left: 25%">
                <span id="span1">00</span>:<span id="span2">00</span>:<span id="span3">00</span>.<span id="span4">000</span>
              </div>
              <div class="timing_btn">
                <button type="button" class="btn" value="start" onclick="openCamera()">开始摄像</button>
                <button type="button" class="btn" value="clear" onclick="stopCamera()">停止摄像</button>

                <button type="button" id="input1" class="btn" value="start" onclick="whenClick()">开始</button>
                <button type="button"  id="input2" class="btn" value="clear" onclick="clear1()">清零</button>
				<button type="button"  id="input3" class="btn" onclick="delete1()">清空</button>
              </div>
            </div>
            <div class="wrap2 flex-col wrap-com">
            </div>
            <div class="wrap3 flex-col wrap-com">
            </div>
            <div class="wrap4 flex-col wrap-com">
              <a href="/index.php/Admin/Index/index" style="height: 100%"></a>
            </div>
            <div class="wrap5 flex-col wrap-com">
          </div>
            <div class="wrap6 flex-col wrap-com">
            </div>
            <!--<div class="wrap7 flex-col wrap-com">-->
            <!--</div>-->
            <div class="wrap8 flex-col wrap-com">
            </div>
            <div class="wrap9 flex-col wrap-com">
            </div>
          </div>
          <div class="mod3 flex-col">
          </div>
          <div class="bd3 flex-col">
            <div class="layer2 flex-row">
              <div class="layer3 flex-col">
                <div class="activity_list" style="display: none">
                  <label class="activity_txt">赛事选择:</label>
                  <div class="activity_item">
                    <select name="activity" id="activity" class="form-control" >
                      <option value="0" data-time="0" class="activity_option">请选择赛事</option>
                      <option value="1" data-time="1636358921201" class="activity_option">男子百米预选赛1</option>
                      <option value="2" data-time="1636358921201" class="activity_option">男子百米预选赛2</option>
                    </select>
                  </div>
                  <label class="activity_lab">发令时间:<span id="start_time"></span></label>
                  <label class="activity_lab">&nbsp;&nbsp;&nbsp;跑道方向:</label>
                  <div class="layer15 flex-col fang1 fang_active" onclick="fang(1)">
                    <span class="txt8"><———</span>
                  </div>
                  <div class="layer15 flex-col fang2"  onclick="fang(2)">
                    <span class="txt8">———></span>
                  </div>
                  <label class="activity_lab pandu" style="color: red;display: none;">&nbsp;&nbsp;&nbsp;判读中...</label>
                </div>
                <div class="mod6 flex-row justify-between">
                  <iframe src ="img_new.html" id="iframe1" height="550" style="z-index: -10" width="1100" scrolling="auto" onload="iframe1.focus()"></iframe>
                </div>
              </div>
              <img
                      class="img6"
                      referrerpolicy="no-referrer"
                      src="/public/speed/img/pslvkjmu7gfmu6tir5sx3aovbs7mn79nufee303546-9f9a-4a2a-9438-b7e2a9a1de0a.png"
              />
              <div class="layer17 flex-col">

                <div class="section10 flex-col">
                  <span class="word37">名次排序</span>
                </div>
                <div class="section11 flex-row justify-between">
                  <div class="layer18 flex-col" style="width: 100%"></div>
                </div>
                <table class="table" id="list">
                  <thead>
                  <tr>
                    <th>赛道</th>
                    <th>选手</th>
                    <th style="display: none;">成绩</th>
                    <th>成绩</th>
                    <th style="display: none;">成绩</th>
                    <th style="display: none;">赛事</th>
                  </tr>
                  </thead>
                  <tbody id="rankList">
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">1</td>
                    <td class="track">/</td>
                    <td id="rank0_1" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">2</td>
                    <td class="track">/</td>
                    <td id="rank0_2" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">3</td>
                    <td class="track">/</td>
                    <td id="rank0_3" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">4</td>
                    <td class="track">/</td>
                    <td id="rank0_4" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">5</td>
                    <td class="track">/</td>
                    <td id="rank0_5" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">6</td>
                    <td class="track">/</td>
                    <td id="rank0_6" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">7</td>
                    <td class="track">/</td>
                    <td id="rank0_7" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  <tr role="row" class="rank0 rank-item">
                    <td class="track">8</td>
                    <td class="track">/</td>
                    <td id="rank0_8" class="rank">00.000</td>
                    <td style="display: none;" class="activity_name_0">/</td>
                  </tr>
                  </tbody>
                </table>
                <div class="gif_list">
                  <div class="gif_item" onclick="lockRank()">
                    <div class="layer29 gif_css">
                    </div>
                    <div class="layer291 gif_css" style="display: none">
                    </div>
                    <div class="gif_txt" id="lock">
                      开始判读
                    </div>
                  </div>
                  <div class="gif_item" id="generate-excel">
                    <div class="layer30 gif_css">
                    </div>
                    <div class="gif_txt">
                      报表输出
                    </div>
                  </div>
                  <div class="gif_item">
                    <div class="layer31 gif_css" onclick="setJpg()">
                    </div>
                    <div class="gif_txt">
                      保存图片
                    </div>
                  </div>
                  <!--<div class="gif_item">-->
                  <!--<div class="layer32 gif_css">-->
                  <!--</div>-->
                  <!--<div class="gif_txt">-->
                  <!--图像裁剪-->
                  <!--</div>-->
                  <!--</div>-->
                  <!--<div class="gif_item">-->
                  <!--<div class="layer33 gif_css">-->
                  <!--</div>-->
                  <!--<div class="gif_txt">-->
                  <!--撤销裁剪-->
                  <!--</div>-->
                  <!--</div>-->
                  <!--<div class="gif_item">-->
                  <!--<div class="layer34 gif_css">-->
                  <!--</div>-->
                  <!--<div class="gif_txt">-->
                  <!--手动裁剪-->
                  <!--</div>-->
                  <!--</div>-->

                </div>
              </div>
            </div>
          </div>

        </div>
        </div>
      </div>
    </div>
    <input type="text" id="activity_id" value="" hidden/>
    <input type="text" id="fang" value="1" hidden/>
    <input type="text" id="locker" value="0" hidden/>
    <input type="text" id="jpg" value="0" hidden/>
  </body>
  <script src="/public/speed/js/jquery.min.js"></script>
  <script src="/public/speed/js/jszip.js"></script>
  <script src="/public/speed/js/FileSaver.js"></script>
  <script src="/public/speed/js/excel-gen.js"></script>
  <script src="/public/speed/js/time2date.js"></script>
  <script src="/public/admin/js/plugins/layer/layer.min.js"></script>
  <script type="text/javascript">

	  ws = new WebSocket("ws://192.168.0.22:5122");
	  ws.onopen = function(){
		ws.send("connect");
	  };
	  ws.onmessage = function(e){
		if( e.data == "start" ){
			whenClick();
		}
	  };

      $(document).ready(function() {
      });
      //秒表计时器
      var milliSeconds1 = document.getElementById("span4");
      var seconds1 = document.getElementById("span3");
      var minutes1 = document.getElementById("span2");
      var hours1 = document.getElementById("span1");
      var time=0;
      var pre_time=0;
      var intervals=0;
      var pre_intervals=0;
      var flag = 0;
      function fang(type) {
          $('#fang').val(type);
          if (type == 1) {
              $('.fang2').removeClass('fang_active');
              $('.fang1').addClass('fang_active');
          }
          if (type == 2) {
              $('.fang1').removeClass('fang_active');
              $('.fang2').addClass('fang_active');
          }
      }
      function whenClick(){
          var inputValue = document.getElementById("input1");
          if(inputValue.value=="start"||inputValue.value=="continue"){
              var date= new Date();
              time = date.getTime();
              pre_time=time;
			  start1(inputValue.value);
              inputValue.value="stop";
              inputValue.innerText = '停止';
              return;
          } else {
              inputValue.value="continue";
              inputValue.innerText = '继续';
              stop1();
          }
      }
      function clear1(){
          //  清零
          stop1();
          seconds1.innerHTML =minutes1.innerHTML = hours1.innerHTML = "00";
          milliSeconds1.innerHTML ="000";
          time=0;
          pre_time=0;
          intervals=0;
          pre_intervals=0;
          camera_on = 0;
          document.getElementById("input1").value = "start";
          document.getElementById("input1").innerText = '开始';
      }

      function start1(action){
          //  开始/继续
          flag = setInterval("timeIncrement();",1);
		  if( action == 'start' ){
			$.get("http://192.168.0.22/highspeed/client.php",{action:"runClock"});
		  }
      }

	  function delete1(){
		$.ajax({
			type:'get',
			url:'./resetResult',
			async:false,
			success:function(){
				top.layer.msg('操作成功',function(){
					location.reload();
				});
			}
		});
	  }

      function timeIncrement(){
          var date = new Date();
          intervals=date.getTime()-time+pre_intervals;
          var a=intervals%1000;
          var b=intervals%60000/1000;
          var c=intervals%3600000/60000;
          var d=intervals/3600000;
          if (camera_on == 0){
              if (b > camera_time) {
                  //openCamera();
              }
          }
          var ms = Math.floor(a);
          if (a<10){
              ms = '00'+Math.floor(a);
          } else if(a<100){
              ms = '0'+Math.floor(a);
          }
          milliSeconds1.innerHTML = ms;
          console.log(ms);
          seconds1.innerHTML=(b<10)?('0'+Math.floor(b)):(Math.floor(b));
          minutes1.innerHTML=(c<10)?('0'+Math.floor(c)):(Math.floor(c));
          hours1.innerHTML=(d<10)?('0'+Math.floor(d)):(Math.floor(d));
      }

      function stop1(){
          //  暂停/停止
          var date = new Date();
          pre_intervals += date.getTime()-pre_time;
          clearInterval(flag);
		  flag = 0;
      }
      //开启摄像头接口
      function openCamera(){
		  if( flag == 0 ){
			top.layer.msg('尚未开始');
		  }else{
			camera_on = 1;
			$.get("http://192.168.0.22/highspeed/client.php",{action:"start"});
		  }
      }
      //停止摄像头接口
      function stopCamera(){
          camera_on = 0;
		  $.get("http://192.168.0.22/highspeed/client.php",{action:"stop"});
      }
      //秒表计时器end
      //图表数据部分
      //1636358921201
      var start_time = 0;//发令开始时间
      var camera_time = 1;//发令后n秒开启摄像头
      var camera_on = 0;//是否发送开启摄像头命令
      document.getElementById("start_time").innerHTML =start_time==0?'0000-00-00 00:00:00.000':time2date(start_time);
      var iframe_time = 0;//子页面返回值
      //主页面-赛道成绩分配
      window.addEventListener('message',function(event){
          //监听键盘按下时的事件
          if (lock == 0) {
              top.layer.msg('当前未开始判读');return;
              return;
          }
          if (activity == 0) {
              top.layer.msg('请选择赛事');return;
              return;
          }
          if (event.data['jpg'] == 1){
              $('#jpg').val(0);
              return;
          }
          iframe_time =event.data['time'];
          var p = Number(event.data['code']);
          var grade = iframe_time;
          var rank_two = "#rank_two"+activity+'_'+p;
          var rank_three = "#rank_three"+activity+'_'+p;
          var rank_four = "#rank_four"+activity+'_'+p;
          var timeArr = timeChange(grade);
          $(`${rank_two}`).text(timeArr.two);//保留2位毫秒
          $(`${rank_three}`).text(timeArr.three);//保留3位毫秒
          $(`${rank_four}`).text(timeArr.four);//保留4位毫秒
          $(`${rank_three}`).attr('grade',grade);

      })
      var lock = 0;//判读状态
      var activity = 0;
      var activity_name = '赛事';
      var rank_arr = [0];
      rankList();
      function rankList() {
          if (activity == 0 ) {
              var rank_new = ".rank"+activity;
              $(`${rank_new}`).css('display','block');
              return;
          }
          var result = ``;
          var name=['梦琪','忆柳','之桃','慕青','问兰','尔岚','元香','初夏','沛菡','傲珊','曼文','乐菱'];
          for (var i=1;i<=8;i++){
              result += `<tr role="row" class="rank${activity} rank-item">
            <td class="track">${i}</td>
            <td class="track">${name[i]}${activity}</td>
            <td id="rank_two${activity}_${i}"  style="display: none;">00.000</td>
            <td id="rank_three${activity}_${i}" class="rank">00.000</td>
            <td id="rank_four${activity}_${i}" style="display: none;">00.000</td>
            <td style="display: none;" class="activity_name_${activity}">${activity_name}</td>
        </tr>`;
          }
          $('#rankList').append(result);
      }
      $(document).on('change','#activity',function(){
          var ht = $(this);
          var val = ht.val();
          if (activity != val ) {
              activity_name = ht.find("option:selected").text();
              start_time = ht.find("option:selected").attr('data-time');
              document.getElementById("start_time").innerHTML =start_time==0?'0000-00-00 00:00:00.000':time2date(start_time);
              var ac = ".activity_name_"+val;
              $(`${ac}`).text(activity_name);
              var rank_old = ".rank"+activity;
              var rank_new = ".rank"+val;
              activity = val;
              $('#activity_id').val(activity);
              if (rank_arr.includes(activity)){
                  $(`${rank_new}`).css('display','table-row');
                  $(`${rank_old}`).css('display','none');
              } else{
                    rank_arr.push(val);
                    $(`${rank_old}`).css('display','none');
                    rankList();

              }
          }
      });
      function setJpg(){
          var jpg = $('#jpg').val();
          if (jpg == 0){
              $('#jpg').val(1);
          }
      }

      $("#generate-excel").click(function () {
          if (activity == 0) {
              top.layer.msg('请选择赛事');return;
          }
          if (rank_arr.includes(0)){
              $(".rank0").remove();
          }
          var excel = new ExcelGen({
              "src_id": "list",
              "show_header": true
          });
          excel.generate('成绩');
      });
      //锁定状态修改
      function lockRank() {
          if (lock == 0) {
              top.layer.msg('解锁成功');
              $('#lock').text('结束判读');
              lock = 1;
              $('.pandu').css('display','block');
              $('.layer29').css('display','none');
              $('.layer291').css('display','block');
          } else {
              top.layer.msg('锁定成功');
              $('#lock').text('开始判读');
              lock = 0;
              $('.pandu').css('display','none');
              $('.layer29').css('display','block');
              $('.layer291').css('display','none');

          }
          $('#locker').val(lock);
      }
      //时间格式转换
      function timeChange(str){
          var disLength = str.length;
          var real = str.substring(0,disLength-1);
          var end = str.substring(disLength,disLength-1);
          var a=real%1000;
          var b=real%60000/1000;
          var mill=String((a<100)?('0'+Math.floor(a)):(Math.floor(a)));
          var sec=(b<10)?('0'+Math.floor(b)):(Math.floor(b));
          var two =sec+'.'+ mill.substring(0,mill.length-1);
          var three =sec+'.'+ mill;
          var four =sec+'.'+ mill+end;
          var arr = {two:two,three:three,four:four};
          return arr;

      }


  </script>
</html>
